<template>
	<view class="payfor">
		<TopBar title="车辆缴费" backType="home"></TopBar>
		<view class="top">
			<image src="../../images/Rectangle 218.png" mode="aspectFill"></image>
			<view class="left" @click="openPropup">
				<image :src="topAvatarUrl" mode="aspectFill"></image>
				<text>{{topNickName}}</text>
			</view>
			<view class="right">
				<navigator url="/pages/paymentInstruction/payment">缴费说明</navigator>
			</view>
		</view>
		<!-- 查询不到车辆 -->
       <view class="noAddPlate" v-if="showNoVehicle ||total === 0">
		<carNumber @changeKeyword="changeKeyword"></carNumber>
		<button type="default" class="btn" @click="payMoney(item.carNo)">查缴停车费</button>
		</view>
		<!-- 添加好的车辆在这显示 -->
			<view class="addPlate" v-else>
			<view class="box" v-for="item in list">
        <view class="info">{{ item.carNo }}</view>
        <uni-icons type="right"color=""size="20" @click="payMoney(item.carNo)"/>
      </view>
	  <view class="other-car" @click="handleShowCar">
		<text >为其他车辆缴费</text>
		<uni-icons type="right" size="20" color="#0680FE"; class="btn"/>
	</view>
			</view>
		  
    
		<!-- 底部弹窗 -->
		<uni-popup ref="propup" type="bottom" background-color="#fff" :is-mask-click="true">
			<view class="user-info">
				<view class="user-info-title">获取您的头像和昵称</view>
				<view class="user-info-update">
					<view class="user-info-item">
						<view class="avatar">
							<text>头像</text>
							<!-- 添加 hidden-btn class -->
							<button class="hidden-btn" open-type="chooseAvatar" @chooseavatar="getAvatar">
								<!-- 如果已授权，显示用户头像；否则显示默认图 -->
								<image v-if="avatarUrl" :src="avatarUrl" mode="aspectFill"></image>
								<image v-else src="/static/default-avatar.png" mode="aspectFill"></image>
							</button>
						</view>
						<uni-icons type="right" class="icon-right"></uni-icons>
					</view>
					<view class="nickName">
						<text>昵称</text>
						<input v-model="nickName" placeholder="请输入昵称" type="nickname" @blur="getNickname"></input>
					</view>
				
					<button class="btn-update" @click="updateInfo">更新</button>
					<view class="log-out" @click="loginOut">退出登录</view>
				</view>
			</view>
		</uni-popup>
	
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import TopBar from '../../component/topbar.vue' // 导入子组件
	import carNumber from '../../component/carNumber.vue';
    import UniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
    import UniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
	//注册组件
	// 注册组件（关键！）
defineOptions({
  components: {
    UniPopup,
    UniIcons
  }
})
//切换添加和未添加车辆页面
const showNoVehicle = ref(false)
const handleShowCar = ()=>{
showNoVehicle.value = true

}
// 添加一个响应式变量用于控制按钮是否禁用
const isButtonDisabled = ref(true)
	// 修复 ref 定义和方法
	// 1. ref 应该指向弹窗的组件，初始值为 null
	const propup = ref(null)
	const avatarUrl = ref('')
	const nickName = ref('微信用户-57512060')
	// 顶部显示用的头像和昵称
	const topAvatarUrl = ref('/static/avater.png') // 默认头像
	const topNickName = ref('卡卡时刻')           // 默认昵称
	//打开弹窗, openPropup 方法中，调用的是 propup.value.open()
	const openPropup = () => {
		//如果弹窗值为true时候就打开弹窗
		if(propup.value){
propup.value.open() 
		}
		
	}
	//获取头像
	const getAvatar = (e) => {
	avatarUrl.value = e.detail.avatarUrl
	
	}
	//获取昵称
	const getNickname = (e)=>{
	nickName.value = e.detail.value
	}
	//更新头像和昵称
	const updateInfo = ()=>{
	topAvatarUrl.value = avatarUrl.value 
	topNickName.value = nickName.value
	propup.value.close()
	}
	//退出登录
	const loginOut = ()=>{
	uni.showModal({
			title: '提示',
			content: '确认退出登录吗？',
			showCancel: true, // 显示取消按钮
			cancelText: '取消',
			confirmText: '确定',
			success: (res) => {
				if (res.confirm) {
					 // 确认退出登录时候清除 token
                    uni.removeStorageSync('token')
					avatarUrl.value = ''
					nickName.value = ''
					topAvatarUrl.value = ''
					topNickName.value = '去登录'
					// 用户点击确定，跳转到登录页面
					uni.reLaunch({
						url: '/pages/login/login' // 替换成你的登录页面路径
					})
				} 
				// 如果点击取消，可以不做处理
			}
		})
    				 
	}
	//判断是否登录，没有就跳转登录页面
	const token = uni.getStorageSync('token')
	if(token === ''){
		uni.reLaunch({
			url:'/pages/login/login',
		})
	}
	//键盘输入到页面的车牌号
	const plate = ref("苏");
const changeKeyword = (val) => {
  plate.value += val;
  console.log(plate.value);
};
//键盘输入的车牌渲染到页面列表上
const total = ref(0);
const list = ref([]);
uni.request({
  url: "https://qwscrm.com:9202/car/v1/query-list",
  method: "POST",
  header: { Authorization: `Bearer ${token}` },
  data: {
    curPage: 1,
    pageSize: 10,
  },
  success: (res) => {
    console.log(res);
    list.value = res.data.data.list;
    total.value = res.data.data.total;
  },
});
//点击右侧箭头跳转支付页面
const payMoney = (carNo)=>{
	uni.navigateTo({
		url:`/pages/carInfo/carInfo?carNo=${encodeURIComponent(carNo)}`
	})
}
</script>

<style lang="less">
	.payfor {
		.top {
			position: relative;

			image {
				width: 100%;
				height: 422rpx;
				margin-top: 7rpx;
			}

			.left {
				position: absolute;
				top: 32rpx;
				left: 0;
				width: 248rpx;
				height: 72rpx;
				display: flex;
				align-items: center;
				background-color: #62ADFB;

				image {
					width: 51rpx;
					height: 51rpx;
					padding-left: 26rpx;
				}

				text {
					width: 120rpx;
					height: 30rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 18rpx;
				}
			}

			.right {
				position: absolute;
				top: 44rpx;
				right: 32rpx;
				width: 120rpx;
				height: 48rpx;
				border-radius: 40rpx;
				color: #458DF7;
				font-size: 22rpx;
				background-color: #F0F6FF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
        .noAddPlate{
		.btn {
			width: 686rpx;
			height: 96rpx;
			background: #0680FE;
			border-radius: 100rpx;
			margin: 0 32rpx;
			margin-top: 112rpx;
			font-family: 'Source Han Sans CN, Source Han Sans CN';
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		}
         .addPlate {
			.box{
      width: 686rpx;
      height: 112rpx;
      border-radius: 4rpx;
     box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0,0,0,0.06);
      margin: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .info {
        margin-left: 48rpx;
      }
	}
	.other-car{
margin-left: 260rpx;
margin-top: 50rpx;
display: flex;
align-items: center;
text{
	width: 196rpx;
height: 28rpx;
	margin-right: 4rpx;
	font-size: 28rpx;
color: #0680FE;
text-align: left;
}
.btn{
	width: 32rpx;
height: 32rpx;
background: #F9F9F9;

}
	}
}
		.user-info {
			   width: 100vw; 
  padding: 20rpx;
  box-sizing: border-box;
			.user-info-title {
				padding-left: 20rpx;
				font-weight: 500;
			}

			.user-info-update {
				margin: 0 40rpx;
                 padding-bottom: 20rpx;
	              
				.user-info-item {
					margin-top: 40rpx;
					display: flex;
					justify-content: space-between;
					/* 这确保了左右两部分尽可能分开 */
					align-items: center;
					height: 80rpx;
				

				.avatar {
					display: flex;
					align-items: center;
					/* 让文字和图片垂直居中 */
					// margin-left: 0; /* 移除这个，让间距由子元素控制 */
				}

				// 新增：隐藏按钮样式的类
				.hidden-btn {
					// 去除所有默认样式
					background-color: transparent !important;
					/* 重要：覆盖可能的默认背景 */
					border: none !important;
					/* 重要：去除边框 */
					padding: 0 !important;
					/* 重要：去除内边距 */
					margin: 0;
					/* 去除外边距 */
					font-size: inherit;
					/* 继承父元素字体大小 */
					color: inherit;
					/* 继承父元素颜色 */
					line-height: normal;
                       width: auto;      /* 不要撑开整个区域 */
  height: auto;
					/* 正常行高 */
					// 如果需要，可以添加 cursor: pointer; 表示可点击
					// cursor: pointer;
					&::after {
						// 2. 关键：重置 button 的 ::after 伪元素
						border: none !important; // 去除边框
						background-color: transparent !important; // 去除背景色
					}

					// 可选：如果希望点击时没有灰框 (微信小程序)
					&::before {
						background-color: transparent !important;
					}
				}

				.hidden-btn image {
					width: 80rpx;
					height: 80rpx;
					margin-left: 20rpx;
					/* 关键：这里设置 20rpx 间距 */
					border-radius: 60rpx;
				}
         
				   .icon-right{
						 font-size: 28rpx;
                       color: #999;
                       width: 30rpx;
                      height: 30rpx;
					}
}
				.nickName {
					display: flex;
					align-items: center;
					border-top: 1px solid #dedede;
					border-bottom: 1px solid #dedede;
					padding: 20rpx 0;

					text {
						font-size: 28rpx;
						color: #333;
						flex: none;
						/* 固定宽度，不伸缩 */
						width: 80rpx;
						/* 可选：固定“昵称”文字宽度 */
					}
					input {
						flex: 1; // 占据剩余空间
						font-size: 28rpx;
						color: #333;
						border: none; // 移除默认边框
						background: transparent; // 背景透明
					}
				}

				.btn-update {
                    
					height: 50rpx;
					background: #0680FE;
					border-radius: 96rpx;
					color: #fff;
					margin-top: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.log-out {
					margin:20rpx auto;
					text-align: center;
					height: 50rpx;
                    line-height: 50rpx;
					color: #0680FE;
					font-size: 25rpx;
				}
	
			}
		}
	}
</style>